<template>
  <div class="role-container">
    <div class="search" v-show="isShowSearch">
      <span>角色名称 </span>
      <el-input placeholder="请输入角色名称" v-model="roleName"/>
      <el-button  class="el-button__primary" type="primary"  @click="initRoleTableData()">
        <template #icon>
          <el-icon>
            <Search/>
          </el-icon>
        </template>
        查询
      </el-button>
      <el-button class="el-button__default" @click="refresh()">
        <template #icon>
          <el-icon>
            <Refresh/>
          </el-icon>
        </template>
        重置
      </el-button>
    </div>
    <!--  操作按钮-->
    <div class="operation">
      <div class="float_left">
        <el-button class="el-button__primary" type="primary" @click="store.setOpenAdd(true)">
          <template #icon>
            <svg-icon icon-class="add"/>
          </template>
          新增
        </el-button>
        <el-button  class="el-button__plain" @click="store.setOpenUpload(true)">
          <template #icon>
            <svg-icon icon-class="cloud-upload"/>
          </template>
          导入
        </el-button>
        <el-button :class="selectedIds.length!==0?'el-button__plain':'el-button__plain__disabled'"  @click="deleteRoleBatch()" :disabled="selectedIds.length===0">
          <template #icon>
            <el-icon><Delete/></el-icon>
          </template>
          删除
        </el-button>
      </div>
      <div class="float_right">
        <el-tooltip :content="isShowSearch?'隐藏搜索':'显示搜索'" placement="top">
          <el-button  circle  @click="isShowSearch=!isShowSearch">
            <template #icon>
              <el-icon> <Search/></el-icon>
            </template>
          </el-button>
        </el-tooltip>
        <el-tooltip content="刷新" placement="top">
          <el-button circle @click="refresh">
            <template #icon>
              <el-icon><Refresh/></el-icon>
            </template>
          </el-button>
        </el-tooltip>
      </div>

    </div>
    <el-table
        row-key="id"
        border
        class="role-table"
        :data="tableData"
        v-loading="loading"
        :header-cell-class-name="'table-header'"
        :cell-class-name="'cell'"
        highlight-current-row
        default-expand-all
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"  :selectable="selectable" width="80" />
      <el-table-column label="#"  prop="id">
      </el-table-column>
        <el-table-column label="角色名称" prop="roleName">
        </el-table-column>
      <el-table-column label="角色标识" prop="roleKey">
      </el-table-column>
      <el-table-column label="角色描述" prop="roleDescription">
      </el-table-column>
      <el-table-column label="数据权限" prop="roleDataScope">
        <template #default="scope">
          <el-tag size="large">{{dataScopeInfo[scope.row.roleDataScope].label}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色状态" prop="status">
        <template #default="scope">
          <el-tag :type="scope.row.status===0?'primary':'danger'" size="large">{{statusInfo[scope.row.status].label}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="200">
      </el-table-column>
      <el-table-column prop="operator" label="操作"  width="250" >
        <template #default="scope">
          <el-button link size="small"  class="role-table__operator"  @click="handleUpdateRole(scope.row.id)">
            <template #icon>
              <svg-icon icon-class="update"/>
            </template>
            修改
          </el-button>
          <el-button link    size="small" class="role-table__operator"  @click="handleGrant(scope.row.id)" :disabled="scope.row.id===1">
            <template #icon>
              <svg-icon icon-class="give-role"/>
            </template>
            授权
          </el-button>
          <el-button link size="small"  class="role-table__operator" :disabled="deleteDisabled(scope.row.id)" @click="deleteRole(scope.row.id)">
            <template #icon>
              <svg-icon icon-class="delete"/>
            </template>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model::current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[6,10,20,30,40,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <addRole @refresh="refresh" />
    <grant-role @refresh="refresh"/>
    <upload  @refresh="refresh"/>
  </div>
</template>
<script setup lang="ts">

import {Delete, Refresh, Search} from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {onMounted, ref} from "vue";
import type {RolePageVO} from "@/api/role/types.ts";
import {deleteRoleById, deleteRoleByIdBatch, getRolePage} from "@/api/role";
import Upload from "@/components/role/upload.vue";
import {roleStore} from "@/stores/role/roleStore.ts";
import AddMenu from "@/components/menu/addMenu.vue";
import AddRole from "@/components/role/addRole.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import GrantRole from "@/components/role/grantRole.vue";
const loading = ref(false)
const isShowSearch = ref(true)
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const tableData = ref([] as RolePageVO[] )
const roleName=ref("")
const selectedIds= ref([] as number[])
const selectable = (row:RolePageVO) => ![1,2].includes(row.id)
const deleteDisabled=(id:number)=>[1,2].includes(id)
const dataScopeInfo = ref([
  { label: '全部数据权限', value: 0 },
  { label: '本级数据权限', value: 1 },
  { label: '本级及以下数据权限', value: 2 },
  { label: '仅本人数据权限', value: 3 },
])
const statusInfo = ref([
  { label: '正常', value: 0 },
  { label: '停用', value: 1 },
])
const store = roleStore()
onMounted( () => {
  initRoleTableData()
})
/**
 * 初始化表单信息
 */
const initRoleTableData=async () => {
  loading.value=true
  const res = await getRolePage({roleName: roleName.value,page: currentPage.value, pageSize: pageSize.value})
  tableData.value = res.data["records"]
  total.value = res.data["total"]
  currentPage.value = res.data['current']
  pageSize.value = res.data['size']
  loading.value=false
}
/**
 * 刷新页面
 */
const refresh=()=>{
  currentPage.value=1
  pageSize.value=10
  roleName.value=""
  store.setRoleId(0)
  initRoleTableData()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  initRoleTableData()
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  initRoleTableData()
}
const handleSelectionChange = (val: RolePageVO[]) => {
  selectedIds.value = val.map(item => item.id)
}
const handleGrant=(id:number)=>{
  store.setGrantRoleId(id)
  store.setGrantPage(true)
}
/**
 * 打开修改页面
 */
const handleUpdateRole=(id)=>{
  store.setRoleId(id)
  store.setOpenAdd(true)
}

/**
 * 删除角色
 * @param id
 */
const deleteRole=(id)=>{
  ElMessageBox.confirm(
    '此操作将永久删除该角色, 是否继续?',
    '提示', {
        app: undefined,
        components: undefined,
        config: undefined,
        directives: undefined,
        mixins: [],
        provides: undefined,
        confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }
  ).then(async () => {
    const res = await deleteRoleById(id)
    if (res.code === 200) {
      ElMessage.success("删除成功")
       refresh()
    }
  }).catch(() => {})
}

/**
 * 批量删除角色
 */
const deleteRoleBatch=()=>{
  if (selectedIds.value.length === 0) {
    ElMessage.warning("请选择要删除的角色")
    return
  }
  ElMessageBox.confirm(
    '此操作将永久删除选中的角色, 是否继续?',
    '提示', {
        app: undefined,
        components: undefined,
        config: undefined,
        directives: undefined,
        mixins: [],
        provides: undefined,
        confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }
  ).then(async () => {
    const res = await deleteRoleByIdBatch(selectedIds.value)
    if (res) {
      ElMessage.success("删除成功")
      selectedIds.value=[]
      refresh()
    }
  }).catch(() => {})
}
</script>
<style scoped>
.role-container {
  border: 1px solid var(--el-menu-border-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.search {
  display: flex;
  font-size: 12px;
}
.search span {
  line-height: 32px;
}
.el-input {
  width: 160px;
  height: 32px;
  font-size: 12px;
  margin: 0 8px;
}
.operation {
  width: 100%;
  height: 10%;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  display: flex;

  .float_left {
    align-items: center;
    display: flex;
  }

  .float_right {
    align-items: center;
    display: flex;
    margin-right: 20px;
  }
}
.pagination {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}
:deep(.table-header){
  color: #000000;
  font-size: 1.5vh;
  text-align: center;
}
.role-table {
  margin: 10px 0 20px 0;
}
.el-table {
  --el-table-row-hover-bg-color:  rgb(245, 247, 250);
  --el-table-header-bg-color:rgb(245, 247, 250);
}
.el-tag--dark, .el-tag--dark.el-tag--primary{
  --el-tag-bg-color:rgb(46, 92, 246);
  color:#ffffff;
}
.el-tag.el-tag--primary{
  --el-tag-text-color:rgb(46, 92, 246);
}
.el-tag--plain, .el-tag--plain.el-tag--primary{
  --el-tag-border-color:rgb(46, 92, 246);
}
:deep(.cell){
  text-align: center;
  margin: 10px 0;
}
:deep(.role-table__operator.disable){

  font-size: 14px;
}
.el-button.is-link{
  --el-button-text-color:rgb(46, 92, 246);
  --el-button-disabled-text-color:rgb(150, 173, 250);
  --el-button-active-text-color:rgb(46, 92, 246);
}

.el-button.is-link:not(.is-disabled):active, .el-button.is-link:not(.is-disabled):hover{
  color:rgb(46, 92, 246);
}
</style>